<template>
  <div :class="{'mobile-resource-setting-main': showMobilePage}" class="resource-setting-main">
    <div class="main-title">资源显示配置</div>
    <div class="switch-set-config divided">
      <span :class="{'active': resourceIsShowPlatform}" class="switch-set-label">资源平台</span>
      <el-switch
        :value="resourceIsShowPlatform"
        class="fb-switch "
        @change="resourceShowChange($event, 'plat')"
      />
    </div>
    <div class="switch-set-config divided">
      <span :class="{'active': resourceIsShowOrgan}" class="switch-set-label">资源所属机构</span>
      <el-switch
        :value="resourceIsShowOrgan"
        class="fb-switch "
        @change="resourceShowChange($event, 'organ')"
      />
    </div>
    <div class="switch-set-config divided">
      <span :class="{'active': resourceShowId}" class="switch-set-label">资源ID</span>
      <el-switch
        :value="resourceShowId"
        class="fb-switch"
        @change="resourceShowChange($event, 'id')"
      />
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { mapGetters } from 'vuex';
import { mapState } from 'vuex';
export default {
  components: { Title },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    ...mapGetters([
      'resourceIsShowPlatform',
      'resourceIsShowOrgan',
      'resourceShowId'
    ])
  },
  methods: {
    resourceShowChange(boolean, type) {
      switch (type) {
        case 'plat':
          this.$store.dispatch('PlatformChange', boolean);
          break;
        case 'organ':
          this.$store.dispatch('OriginzationChange', boolean);
          break;
        case 'id':
          this.$store.dispatch('IdChange', boolean);
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.resource-setting-main {
  display: flex;
  align-items: center;
  .main-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #141C3D;
    margin-right: 32px;
  }
  .switch-set-config {
    height: 32px;
    line-height: 32px;
    display: flex;
    align-items: center;
    margin-right: 80px;
    .switch-set-label {
      font-size: 14px;
      color: #666666;
      margin-right: 16px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
.mobile-resource-setting-main {
  display: block;
  .switch-set-config {
    width: 100%;
    margin: 12px 0;
    .switch-set-label {
      display: inline-block;
      min-width: 84px;
    }
  }
}
</style>
